<template>
    <div class="keep-scroll-container"
         :style="{width:$attrs.width||'100vw',height:$attrs.height||'100vh'}"
         :ref="keepScrollItem"
    >
        <!--<div class="keep-scroll-middle" >-->
            <!--<div :style="{height:$attrs.paddingTop}"></div>-->
            <slot>

            </slot>
            <!--<div :style="{height:$attrs.paddingBottom}"></div>-->
        <!--</div>-->
    </div>
</template>

<script>
    export default {
        name: "keep-scroll",
        data(){
            return {
                keepScrollItem:'',
                scroll:null
            }
        },

        created(){
            this.keepScrollItem = `keepScrollItem${new Date().getTime()}`;
        },
        mounted(){
            this.$nextTick(()=>{
                this.scroll = new this.$BScroll(this.$refs[this.keepScrollItem],{
                  scrollX:true,
                  bounce:{
                    left:true,
                    right:true,
                    top:false,
                    bottom:false
                  },
                  momentum:true,
                  click:true,
                });

            })
        }
    }
</script>

<style scoped>
  .keep-scroll-middle{
    width:102vw;
  }
    .keep-scroll-container{
        overflow: hidden;
        background: #fff;
    }
</style>
